<template>
    <div id="listDiv">
        <ul id="queryList">
            <li v-for="(item,index) in getSlideList" :key="index" @click="selectCurrentSlide(index)">
                <div :class="{'imgDiv':true,'divActive':selectedIndex===index}">    
                    <img :src="item.url" >  
                </div>
            </li>
        </ul>
    </div>
</template>

<script type="text/javascript">
import packagingUtil from '../packagingUtil.js'
export default {
    props: [''],
    data () {
        return {
            selectedIndex: ''
        }
    },
    methods: {
        selectCurrentSlide(index){
            this.selectedIndex = index;
            this.$emit('selectEvent', index);
        }
    },
    filters: {
      
    },
    computed : {
       getSlideList (){
            return this.$store.state.slides;
        }
    }
       

}
</script>

<style scoped>
    #listDiv{
        text-align: center;
        height: 600px;
        width: 980px;
        overflow: auto;
    }
    #queryList{
        width: 95%;
        height: 99%;
        text-align: center;
        display: inline-block;
    }
    li{
        width: 280px;
	    height: 188px;
	    background-color: #ffffff;
	    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
	    border-radius: 4px;
	    border: solid 1px #e0e0e0;
        float: left;
        margin:20px 20px 20px 0; 
        list-style: none;
        display: inline;
    }
    div.imgDiv{
        float: left;
        overflow: hidden;
        border-radius: 4px 4px 0 0;
        height: 188px;
    }
    div.imgDiv:hover{
        cursor:pointer;
         box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
    }
    .divActive{
        border: solid 5px red;
    }
    div.imgDiv>img{
        width: 280px;
	    height: 188px;
        
    }
    @media screen and (max-width: 1023px){
   
    }
    @media screen and (min-width:1024px) and (max-width: 1439px){
        
    }
    @media screen and (min-width:1440px) and (max-width:1599px){
        
    }
    @media screen and (min-width:1600px) and (max-width:1919px){
    
    }
</style>
